@nav_button_width: 25px;
@icon_size: 16px;

.dx-tabs-ie-hack {
    a { /* END TODO */ /* TODO: IE hack*/
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        color: white;
        text-decoration: none;
        opacity: 0.001;
    }
}

.dx-tabs {
    /*TODO: remove position, table-layout, display from root element*/
    .user-select(none);
    display: inline-block;
    width: 100%;
    text-align: center;
    table-layout: fixed;
    position: relative;
}

.dx-tabs-wrapper {
    display: table-row;
}


.dx-tabs-scrollable  {
    .dx-tabs-wrapper {
        display: block;
        white-space: nowrap;
        height: 100%;
    }

    .dx-tab {
        height: 100%;
        display: inline-block;

        &:before {
            content: "";
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
    }

    .dx-scrollable-content {
        height: 100%;
    }
}

.dx-tabs-nav-buttons {
    .dx-tabs-scrollable {
        margin-right: @nav_button_width;
        margin-left: @nav_button_width;
    }
}

.dx-tabs-nav-button {
    width: @nav_button_width;
    padding: 0;
    height: 100%;
    position: absolute;
    top: 0;
}

.dx-tabs-nav-button-left {
    left: 0;
}

.dx-tabs-nav-button-right {
    right: 0;
}

.dx-tabs-expanded {
    display: table;
}

.dx-tab {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    cursor: pointer;
    white-space:nowrap;

    .dx-tabs-ie-hack();
    .dx-icon {
        width: @icon_size;
        height: @icon_size;
        display: block;
        margin: 0 auto;
        .user-drag(none);
    }
}

.dx-tab-content {
    display: inline-block;
    max-width: 100%;
}

.dx-tab-text {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    .user-drag(none);
    .dx-overflow;
}

.dx-tabs-item-badge {
    display: inline-block;
    vertical-align: top;

}

.dx-state-disabled {
    .dx-tab {
        cursor: default;
    }
}
